<template>
	<view><!-- 这个class不能删 -->
		<!-- <view class="titile">{{detaildata.title}}</view>
		<view class="psty">{{detaildata.created_at}}</view>
		<view class="msgcontant" v-if="id != 2" v-html="detaildata.content"></view>
		<view v-if="activeList.length > 0">{{activeList[0].title}}</view> -->
		<!--  -->
		<!-- <view v-if="activeList.length > 0">
			<view class="activity">
				<scroll-view scroll-x="true" class="slide">
					<view class="active">
						<view v-for="(item, index) of activeList" :key="index">
								<view :class="{'pitch':index == pitch}" @click="is_pitch(index)">{{item.title}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view> -->

		<view class="content" v-if="detaildata">
			<view class="titile">
				<text>{{detaildata.title}}</text>
			</view>
			<view class="psty">{{detaildata.created_at || detaildata.start_at}}</view>
			<view class="msgcontant" v-html="detaildata.content"></view>
			<view class="money" v-if="id">
				<view>
					<view>￥
						<text>{{detaildata.money}}</text>
					</view>
					<view>
						<button v-if="detaildata.is_join == 0" class="right" @click="showPayActionSheet(detaildata)">参加</button>
						<button v-if="detaildata.is_join == 1" class="right">已参加</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import util from "@/common/util.js";
	import amap from '@/common/amap/amap.js';
	
	export default {
		
		data() {
			return {
				myInfo: {},
				banner_id:'',
				detaildata:'',
				id:'', //上个页面传的标识
				activeList:[], //获取的数据
				pitch:0, //选中
				platform: '',
			}
		},
		onLoad(options){
			try {
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					this.myInfo = myInfo;
					if (!!this.myInfo.is_request) {
						for (let i = 0; i < this.cityList.length; i++) {
							if (this.myInfo.is_request.pcode == this.cityList[i].value) {
								this.filter = this.cityList[i].label;
							}
						}
					} 
				}
			} catch (e) {
				console.warn(e)
			}
			try {
				const systemInfo = uni.getSystemInfoSync();
				if (systemInfo) {
					this.platform = systemInfo.platform
				}
			} catch (e) {
				console.log(e)
			}
			this.id = options.id;
			this.banner_id=decodeURIComponent(options.banner_id)
			if(options.id){
					this.getText(this.id);
				} else {
					this.getBanner(this.banner_id)
				}
			
			uni.setNavigationBarTitle({
				title: options.title
			})
			
		},
		onPullDownRefresh() {
		
			setTimeout(() => {
				if(this.id){
					this.getText(this.id);
				} else {
					this.getBanner(this.banner_id)
				}
			}, 500)
		},
		methods: {
			///////////////////////
			showPayActionSheet: function (item) {
				if(this.detaildata.is_join == 1){
					return;
				}
				uni.showActionSheet({
					itemList: ['支付宝支付', '微信支付'],
					success: res => {
						if (res.tapIndex == 0) {
							this.pay('alipay', item)
						}
						if (res.tapIndex == 1) {
							this.pay('wechat', item)
						}
					},
					fail: err => {
						console.log(err.errMsg);
					}
				});
			},

			pay: function (payment, item) {
				console.log('item',item)
				uni.showLoading({
					title: ''
				});
				this.$api.api.ajaxData({
					method: 'V1.UserOrder',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					xid: item.id,
					type: 'active', //active
					payment: payment,
					sys: this.platform,
				}, res => {
					uni.hideLoading();
					if (res.status) {
						if (payment == 'wechat') {
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: JSON.stringify({  
									appid: res.data.appid,
									noncestr: res.data.noncestr,
									package: res.data.package,
									partnerid: res.data.partnerid,
									prepayid: res.data.prepayid,
									timestamp: res.data.timestamp,
									sign: res.data.sign
								}),
								success: function (res) {
									console.log('success:' + JSON.stringify(res));
								},
								fail: function (err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						} 
						if (payment == 'alipay') {
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: res.data,
								success: function (res) {
									console.log('success:' + JSON.stringify(res));
									this.getText(this.activeList[i].id);
								},
								fail: function (err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						}
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
					}
				}, err => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					});
				})
			},
			///////////////////////
			getBanner:function(val){
				this.$api.api.ajaxData({
					method: 'V1.Banner',
					uid: this.myInfo.id,
					banner_id:val,
				}, res => {
					if(res.code==200){
						this.detaildata=res.data;
						
					}
					
				}, err => {
					uni.hideLoading();
					
				})
			},
			// 修改中的信息
			is_pitch(i){
				if(this.pitch == i){
					return;
				}
				this.pitch = i;
				console.log(i)
				this.getText(this.activeList[i].id);
			},
			// 获取线下活动数据
			getText(val){
				this.$api.api.ajaxData({
					method: 'V1.Active',
					uid: this.myInfo.id,
					active_id:val,
				}, res => {
					console.log('res',res)
					if(res.code==200){
						if(val == ''){
							this.activeList = res.data;
							this.detaildata = res.data[0];
						} else {
							this.detaildata = res.data;
						}
					}
					
				}, err => {
					uni.hideLoading();
					
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import '../../common/common.scss';
	.titile{
		font-size: 36rpx;
		color: #1c1c1c;
		line-height: 42rpx;
		text-align: center;
		padding: 10rpx 24rpx;
	}
	.psty{
		font-size: 28rpx;
		line-height: 34rpx;
		text-align: center;
		padding: 10rpx 24rpx;
		color: #999;
	}
	.content{
		.msgcontant{
			font-size: 30rpx;
			line-height: 36rpx;
			text-indent:0px;
			padding-top: 20rpx;
			padding: 10rpx 24rpx;
			>img{
				width: 90%;
				margin:10rpx 0 ;
			}
			
		}

	}
	.activity{
		width: 750rpx;
		display: flex;
		justify-content: center;
	}
	.slide{
		background-color: bisque;
		width: 680rpx;
		height: 80rpx;
		border-radius: 10rpx;
	}
	.active{
		width: 680rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		>view{
			border-radius: 5rpx;
			background-color:#fff;
			margin-left: 5rpx;
			>view{
				width: 200rpx;
				text-indent:8rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				
			}
		}
	}
	.pitch{
		background-color: bisque;
	}
	.money{
		width: 750rpx;
		display: flex;
		justify-content: center;
		margin-bottom: 10rpx;
		border: 1rpx solid transparent;
		border-top-color: #eee;
		>view{
			width: 600rpx;
			height: 100rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			>view{
				margin: 0 10rpx;
				>text{
					font-size: 40rpx;
				}
			}
			.right{
				height: 60rpx;
				line-height: 60rpx;
				background-color: #ff4362;
				padding: 0 24rpx;
				border-radius: 15rpx;
				font-size: 30rpx;
				width: 150rpx;
				color: #fff;
			}
		}
	}
</style>
				